<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        #header {
            border: 1px solid red;
        }

        #header:after {
            content: "";
            display: block;
            clear: both;
        }

        #header > span:nth-of-type(1) {
            float: left;
        }

        #header > span:nth-of-type(2) {
            float: left;
        }

        #header > span:nth-of-type(3) {
            float: right;
        }

        #header > span:nth-of-type(4) {
            float: right;
            clear: right; /*清除哪一侧其他元素的浮动效果*/
        }

        #header > div {
            clear: both;
        }
    </style>
</head>
<body>

<div id="header">
    <span><img src="imgs/avatar.jpg" alt=""></span>
    <span><img src="imgs/avatar2.jpg" alt=""></span>
    <span><img src="imgs/avatar3.jpg" alt=""></span>
    <span>一段长长的文字一段长长的文字一段长长的文字一段长长的文字一段长长的文字</span>
</div>

</body>
</html>